<template>
  <div class="legend-info">
    <!-- <div v-for="(cls, index) in $store.state.map.classes" :key="index" class="legend-info-line">
            <span class="legend-info-line-color" :style="`background-color: ${cls.color}`"></span>
            <span class="legend-info-line-text">{{ cls.label }}</span>
        </div> -->
    <div v-for="(cls, index) in legend" :key="index" class="legend-info-line">
      <span
        v-if="cls.type == 'line'"
        class="legend-info-line-color-stroke"
        :style="`background-color: ${cls.color}; height: ${cls.stroke}px`"
      ></span>
      <span
        v-else
        class="legend-info-line-color"
        :style="`background-color: ${cls.color}`"
      ></span>
      <span class="legend-info-line-text">{{ cls.label }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    legend: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style lang="scss" scoped>
.legend-info {
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px;

  width: fit-content;
  gap: 2px;

  &-line {
    /* 编组 8备份 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    // padding: 6px 0px;
    gap: 16px;

    width: fit-content;
    height: 28px;

    background: rgba(255, 255, 255, 0.01);

    &-color {
      /* Rectangle */

      height: 14px;
      width: 14px;

      background: #e57386;
      border: 1px solid #ffffff;
      border-radius: 120px;
      &-stroke {
        width: 14px;
        border-radius: 1px;
      }
    }

    &-text {
      /* 序号 */

      // width: 78px;
      height: 16px;

      /* Small/UI */
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 16px;
      /* identical to box height, or 133% */

      /* N2 */
      color: #596080;
    }
  }
}
</style>
